<template>
  <div>
    <el-row class="bg_write">
      <el-row>
        <el-col :span="24" class="content_title">
          <el-col :span="12">
            <HeadTitle></HeadTitle>
          </el-col>
          <el-col :span="12">
            <el-button
              :loading="$store.state.isLoading"
              @click="import_excel()"
              type="primary"
              class="f_r"
              size="mini"
            >导入</el-button>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <excel_search @search_change="get_search"></excel_search>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="pd_20">
      <el-table
        ref="multipleTable"
        :data="list_data"
        style="width: 99.9%"
        v-loading="loading"
        stripe
        header-row-class-name="head_color"
        tooltip-effect="dark"
      >
        <el-table-column v-for="(item,i) in header_data" :label="item.title" :key="i">
          <template slot-scope="scope">
            <span>{{list_data[scope.$index][item.iden]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button
              :loading="$store.state.isLoading"
              type="primary"
              size="mini"
              @click="get_list_detail(list_data[scope.$index].id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="table_bottom">
        <el-col :span="24" class="tr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total_page.all_num"
          ></el-pagination>
        </el-col>
      </el-col>
    </el-row>

    <excel_in :in_show="in_show" @is_close="dia_close"></excel_in>
  </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import detail from "@/components/auto/excel_detail.vue";
import excel_in from "@/components/auto/excel_in.vue";
import excel_search from "@/components/auto/excel_search.vue";
export default {
  name: "excel_list",
  data() {
    return {
      is_search: false,
      search_form: {},
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      total_page: "",
      in_show: false,
      loading: false,
      list_data: [],
      header_data: [{ iden: "", title: "" }],
      list_detail: [],
      detail_show: false,
    };
  },
  components: {
    HeadTitle,
    detail,
    excel_in,
    excel_search
  },
  created() {
    this.getList(1);
  },
  methods: {
    get_search(res) {
      this.search_form = res;
      this.get_search_list(1);
      this.is_search = true;
    },
    get_search_list(page) {
      var obj = this.search_form;
      obj.page = page;
      this.loading = true;
      this.$api.getauto.get_excel_list(obj).then(res => {
        if (res.data.code == 200) {
          this.loading = false;
          this.list_data = res.data.result.data;
          this.header_data = res.data.result.title_ar || [];
          // this.header_data.splice(this.header_data.length-1,1);       //去除id行
          this.total_page = res.data.result;
          console.log(res);
        } else {
          this.loading = false;
        }
      });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      //每页下拉显示数据
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      //点击第几页
      this.loading = true;
      this.currentPage = parseInt(currentPage);
      if (this.is_search) {
        //是搜索
        console.log(currentPage);
        this.get_search_list(this.currentPage);
        this.loading = false;
      } else {
        //不是搜索
        this.getList(currentPage);
        this.loading = false;
      }
    },
    dia_close() {
      //弹窗关闭
      this.in_show = false;
      this.getList(1);
    },
    import_excel() {
      //点击导入按钮
      this.in_show = true;
    },
    get_list_detail(e) {
      this.detail_show = true;
      this.$router.push({ path: "detail", query: { id: e } });
    },
    add() {},
    handleSelectionChange() {},
    getList(page) {
      this.loading = true;
      this.$api.getauto.get_excel_list({ page: page }).then(res => {
        if (res.data.code == 200) {
          this.loading = false;
          this.list_data = res.data.result.data;
          this.header_data = res.data.result.title_ar || [];
          // this.header_data.splice(this.header_data.length-1,1);       //去除id行
          this.total_page = res.data.result;
        } else {
          this.loading = false;
        }
      });
    }
  }
};
</script>

